<template>
    <div class="NumbeRFMaintenMZZJJZ">
<!--         style="position: fixed; bottom: 0px; top: 0px;left:0px;right: 0px;"-->
        <div class="pubBig standard " >
            <div class="h0">
                <p class="lt">检查检验主题</p>
            </div>

            <el-row class="selectTime" style="padding: 6px">

                <el-col :span="5">
                    <span>机构：</span>
                    <el-tooltip :disabled="disabledTooltip" style="width: 180px!important;" effect="dark"
                                :content="selectZZJGNames" placement="top">

                        <el-select v-model="selectZZJGNames" placeholder="请选择机构"
                                   style="width: 180px;text-overflow: ellipsis;"
                                   show-overflow-tooltip ref="selectReport">
                            <el-option style="width: 380px;height:200px;overflow: auto;background-color:#fff">
                                <el-tree
                                        v-if="false"
                                        :data="ZZJGList"
                                        :check-strictly="true"
                                        :props="defaultProps"

                                        node-key="id"
                                        show-checkbox
                                        @node-click="handleNodeClick"
                                        @check="handleCheck"
                                ></el-tree>
                                <el-tree
                                        :data="ZZJGList"
                                        show-checkbox
                                        node-key="id"
                                        ref="treeJG"
                                        :props="defaultProps"
                                        @check="handleCheck"
                                        default-expand-all
                                        :check-strictly="true"
                                        :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span v-if="false">{{ node.label }}</span>
          <el-dropdown @command="handleCommand">
             <span class="el-dropdown-link">
                  {{ node.label }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
             <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="beforeHandleCommand(0, data,'本机构')">本机构</el-dropdown-item>
                  <el-dropdown-item :command="beforeHandleCommand(0, data,'本机构及下属机构')">本机构及下属机构</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
      </span>
                                </el-tree>
                            </el-option>
                        </el-select>
                    </el-tooltip>
                </el-col>
                <el-col :span="2">
                    <Button type="primary" icon="ios-search" @click="setSelectQK">清空</Button>
                </el-col>
                <el-col :span="4">
                    <el-date-picker type="date" placeholder="Select date" @change="getDataList()" style="width: 200px"
                                    v-model="queryDataObj.BeginDate"
                                    value-format="yyyy-MM-dd"
                    ></el-date-picker>
                </el-col>
                <el-col :span="1" style="color: #348EED;font-size: 16px;text-align:center;padding: 6px">至</el-col>
                <el-col :span="4">
                    <el-date-picker type="date" placeholder="Select date" @change="getDataList()" style="width: 200px"
                                    v-model="queryDataObj.EndDate"
                                    value-format="yyyy-MM-dd"
                    ></el-date-picker>
                </el-col>
                <el-col :span="2">
                    <Button type="primary" @click="getDataList()" icon="ios-search">搜索</Button>
                </el-col>
            </el-row>
            <div style="height: 40%!important;">
                <el-row style="height: 100%!important;">
                    <el-col :span="12" style="height: 100%!important;">
                        <div id="container4" style="height: 100%!important;"></div>
                    </el-col>
                    <el-col :span="12" style="height: 100%!important;">
                        <div id="container5" style="height: 100%!important;">
                            <el-table
                                    :data="data1"
                                    stripe
                                    style="width: 100%;height: 90%!important;overflow: auto">
                                <el-table-column
                                        prop="ItemCode"
                                        label="项目编码"
                                >
                                </el-table-column>

                                <el-table-column
                                        prop="ItemName"
                                        label="项目名称">
                                </el-table-column>
                                <el-table-column
                                        prop="SectionName"
                                        label="申请科室">
                                </el-table-column>
                                <el-table-column
                                        prop="TestPatientNum"
                                        sortable
                                        label="检验申请人次">
                                </el-table-column>

                                <el-table-column
                                        prop="CheckPatientNum"
                                        sortable
                                        label="检验执行人次">
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-col>


                </el-row>
            </div>

            <el-row>
                <i-col span="24" style="height: 2px;background: #5c6b77;margin:  22px"></i-col>
            </el-row>
            <div style="height: 40%!important;">
                <el-row style="height: 100%!important;">
                    <el-col :span="24" style="height: 100%!important;">
                        <div id="container" style="height: 100%!important;"></div>
                    </el-col>
                    <!--                <el-col :span="8">-->
                    <!--                    <div id="container2" style="height: 300px;"></div>-->
                    <!--                </el-col>-->


                </el-row>
            </div>

        </div>
    </div>
</template>
<script>
    import echarts from 'echarts'

    export default {
        name: "Bedinformation",
        data() {
            return {//定义全局变量
                time: '2019-08-24',
                time2: '2019-08-25',
                columns1: [
                    {
                        title: '项目编码',
                        key: 'id'
                    },
                    {
                        title: '项目名称',
                        key: 'xmmc'
                    },
                    {
                        title: '申请科室',
                        key: 'ksmc'
                    }, {
                        title: '检验申请人次',
                        key: 'srhj'
                    }, {
                        title: '检验执行人次',
                        key: 'srhj'
                    },
                ],

                data1: [],
                barData: {
                    Mon: 13253,
                    Tue: 34235,
                    Wed: 26321,
                    Thu: 12340,
                    Fri: 24643,
                    Sat: 1322,
                    Sun: 1324
                },
                /************************************************/
                selectZZJG: {
                    name: ""
                },
                selectZZJGNames: "",
                selectZZJGIDList: [],
                ZZJGList: [],
                defaultProps: {
                    children: 'childs',
                    label: 'name'
                },
                disabledTooltip: true,
                queryDataObj: {
                    BeginDate: "",
                    EndDate: "",
                    Hospitals: []
                },
                /***仪器使用情况***/
                YQSYQKkeys: [],
                YQSYQKdatas: [],
                /**科室用血量分析**/
                KSYXLkeys: [],
                KSYXLXJdatas: [],//血浆
                KSYXLZTXdatas: [],//自体血
                /**抗肿瘤药物分析**/
                KZLYWKeys: [],
                KZLYWDatas: [],
            }
        },
        methods: {
            showTooltip() {
                console.log("数据111111111122222")
                const lifeW = this.selectZZJGNames;
                console.log(lifeW)
                console.log(lifeW.length)
                this.disabledTooltip = lifeW.length < 20
                console.log(this.disabledTooltip)
            },
            beforeHandleCommand(index, row, command) {
                return {
                    'index': index,
                    'row': row,
                    'command': command
                }
            },
            handleCommand(command) {
                switch (command.command) {
                    case "本机构"://本机构
                        console.log("本机构@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@");
                        console.log(command.row)
                        this.selectBJG(command.row)
                        break;
                    case "本机构及下属机构"://本机构及下属机构
                        this.selectAllJG(command.row)
                        break;

                }
            },
            setSelectQK() {
                this.selectZZJGNames = "";
                this.selectZZJGIDList = []
                this.$refs.treeJG.setCheckedKeys([]);
            },
            selectBJG(data) {
                console.log("选中本机构")
                console.log(data)
                this.selectZZJGNames = "";
                this.selectZZJGIDList = []
                var isCZ = false
                this.selectZZJGIDList.forEach(m => {
                    if (m.id == data.id) {
                        isCZ = true
                    }
                })
                if (isCZ == false) {
                    var obj = {
                        id: data.id,
                        name: data.name
                    }
                    this.selectZZJGIDList.push(obj)
                    var keys = [];
                    this.selectZZJGNames = ""
                    this.selectZZJGIDList.forEach(m => {
                        keys.push(m.id)
                        this.selectZZJGNames += m.name + ","
                    })
                    console.log("选中机构打勾")
                    this.$refs.treeJG.setCheckedKeys(keys);
                }
            },
            selectAllJG(data) {
                console.log("选中本机构")
                console.log(data)
                this.selectZZJGNames = "";
                this.selectZZJGIDList = []
                var isCZ = false
                this.selectZZJGIDList.forEach(m => {
                    if (m.id == data.id) {
                        isCZ = true
                    }
                })
                if (isCZ == false) {
                    var obj = {
                        id: data.id,
                        name: data.name
                    }
                    this.selectZZJGIDList.push(obj)
                }
                data.childs.forEach(m => {
                    var isCZ2 = false
                    this.selectZZJGIDList.forEach(n => {
                        if (m.id == n.id) {
                            isCZ2 = true
                        }
                    })
                    if (isCZ2 == false) {
                        var obj = {
                            id: m.id,
                            name: m.name
                        }
                        this.selectZZJGIDList.push(obj)
                    }

                    if (m.childs.length > 0) {
                        m.childs.forEach(m1 => {
                            var isCZ21 = false
                            this.selectZZJGIDList.forEach(n => {
                                if (m1.id == n.id) {
                                    isCZ21 = true
                                }
                            })
                            if (isCZ21 == false) {
                                var obj = {
                                    id: m1.id,
                                    name: m1.name
                                }
                                this.selectZZJGIDList.push(obj)
                            }

                            if (m1.childs.length > 0) {
                                if (m1.childs.length > 0) {
                                    m1.childs.forEach(m11 => {
                                        var isCZ211 = false
                                        this.selectZZJGIDList.forEach(n => {
                                            if (m11.id == n.id) {
                                                isCZ211 = true
                                            }
                                        })
                                        if (isCZ211 == false) {
                                            var obj = {
                                                id: m11.id,
                                                name: m11.name
                                            }
                                            this.selectZZJGIDList.push(obj)
                                        }

                                        if (m11.childs.length > 0) {

                                        }
                                    })
                                }
                            }
                        })
                    }
                })


                var keys = [];
                this.selectZZJGNames = ""
                this.selectZZJGIDList.forEach(m => {
                    keys.push(m.id)
                    this.selectZZJGNames += m.name + ","
                })
                console.log("选中机构打勾")
                this.$refs.treeJG.setCheckedKeys(keys);


            },
            handleNodeClick(data) {
                console.log(data);
                this.$refs.selectReport.blur()
                // this.selectZZJG=data;
                this.selectZZJGNames = data.name
                this.selectZZJGIDList = []
                var obj = {
                    id: data.id
                }
                this.selectZZJGIDList.push(obj)
                this.$refs.treeJG.setCheckedKeys([]);

            },
            handleCheck(checkedNodes, checkedKeys) {
                console.log("选中机构节点1")
                console.log(checkedNodes)
                console.log("选中机构节点2")
                console.log(checkedKeys)
                console.log(checkedKeys.checkedNodes)

                this.selectZZJGNames = "";
                this.selectZZJGIDList = []
                checkedKeys.checkedNodes.forEach(m => {
                    var obj = {
                        id: m.id,
                        name: m.name
                    }
                    this.selectZZJGIDList.push(obj)
                    this.selectZZJGNames += m.name + ","
                })


            },
            handleCheckChange(data, checked, indeterminate) {
                // console.log("选中机构节点1")
                //  console.log(data)
                //  console.log("选中机构节点2")
                //  console.log(checked)
                //  console.log("选中机构节点3")
                //  console.log(indeterminate)
            },


            getDataList() {
                if (this.selectZZJGIDList == null || this.selectZZJGIDList.length == 0) {
                    this.$message({showClose: true, message: "请选择机构后查询", type: "error"});
                    return
                }
                this.queryDataObj.Hospitals=[];
                this.selectZZJGIDList.forEach(m => {
                    this.queryDataObj.Hospitals.push(m.id);
                })

                var params = this.queryDataObj;
                console.log("请求查询传参");
                console.log(params);
                this.$post("/BI/getJCHYZTList", params)
                    .then(res => {
                        console.log("请求查询返回值");
                        console.log(res.data);
                        if (res.code == 0) {
                            /***仪器使用情况***/
                            // this.YQSYQKkeys = ['尿分析仪', '生化分析仪', '血球仪', '血凝仪', '血流变分析仪',]
                            // this.YQSYQKdatas = [589, 170, 213, 192, 208]
                            this.YQSYQKkeys = []
                            this.YQSYQKdatas = []
                            if (res.data.List1 != null) {
                                res.data.List1.forEach(m => {
                                    console.log("病人费用统计******************************************")
                                    console.log(m)
                                    this.YQSYQKkeys.push(m.ItemName);
                                    this.YQSYQKdatas.push(m.Quantity);
                                })
                            }
                            this.data1=res.data.List2;

                            /**科室用血量分析**/
                            // this.KSYXLkeys =  ['心电', 'CT', 'DR', '超声']
                            // this.KSYXLXJdatas = [2.0, 4.9, 7.0, 23.2,]//血浆
                            this.KSYXLkeys =  []
                            this.KSYXLXJdatas = []//血浆
                            if (res.data.List4 != null) {
                                res.data.List4.forEach(m => {
                                    console.log("病人费用统计******************************************")
                                    console.log(m)
                                    this.KSYXLkeys.push(m.ItemName);
                                    this.KSYXLXJdatas.push(m.Quantity);
                                })
                            }



                            // this.KZLYWKeys = ['氟尿嘧啶', '羟基脲', '多柔比星', '其他']
                            // this.KZLYWDatas = [
                            //     {value: 340, name: '氟尿嘧啶'},
                            //     {value: 132, name: '羟基脲'},
                            //     {value: 120, name: '多柔比星'},
                            //     {value: 242, name: '其他'},
                            // ]
                            this.init();
                        } else {
                            this.$message({showClose: true, message: res.msg, type: "error"});
                        }
                    })
                    .catch(err => {
                        console.log(err);
                        this.$message({showClose: true, message: err, type: "error"});
                    });


            },
            formatDateTime(date, dt) {
                var nd = date
                nd = nd.valueOf()
                nd = nd + dt * 24 * 60 * 60 * 1000
                nd = new Date(nd)
                var y = nd.getFullYear()// 获取年
                var m = nd.getMonth() + 1// 获取月
                var d = nd.getDate()// 获取天
                var h = nd.getHours()// 获取小时
                var f = nd.getMinutes()// 获取分钟
                var s = nd.getSeconds()// 获取秒
                if (m <= 9) m = '0' + m
                if (d <= 9) d = '0' + d
                if (h <= 9) h = '0' + h
                if (f <= 9) f = '0' + f
                if (s <= 9) s = '0' + s
                // var cdate = y + '-'  + m +  '-'  + d + ' '  + h +  ':'  + f +  ':'  + s;
                var cdate = y + '-' + m + '-' + d
                return cdate

            },
            //
            init() {
                //
                var dom = document.getElementById("container");
                var myChart = echarts.init(dom);
                // var dom2 = document.getElementById("container2");
                // var myChart2 = echarts.init(dom2);

                var dom4 = document.getElementById("container4");
                var myChart4 = echarts.init(dom4);


                //********************************************************************

                //仪器使用情况
                var optionGHLX = {
                    title: {
                        text: '项目TOP10',
                        subtext: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['次']
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data: this.YQSYQKkeys
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '次',
                            type: 'bar',
                            data: this.YQSYQKdatas,


                            itemStyle: {
                                normal: {
                                    //每根柱子颜色设置
                                    color: function (params) {
                                        let colorList = [
                                            "#c23531",
                                            "#4BABDE",
                                            "#FFDE76",
                                            "#E43C59",
                                            "#2f4554",
                                            "#61a0a8",
                                            "#d48265",
                                            "#91c7ae",
                                            "#749f83",
                                            "#ca8622",
                                            "#bda29a",
                                            "#6e7074",
                                            "#546570",
                                            "#c4ccd3",

                                            "#37A2DA"
                                        ];
                                        return colorList[params.dataIndex];
                                    },
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: 'black',
                                            fontSize: 10
                                        }
                                    }
                                }
                            }
                        },

                    ]
                };
                myChart4.setOption(optionGHLX, true);  //仪器使用情况
                //*********************第二行****************************

                //科室用血量分析
                var optionYWSR = {
                    title: {
                        text: '项目执行数量情况',
                        subtext: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['项目']
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data:this.KSYXLkeys
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '次',
                            type: 'bar',
                            data: this.KSYXLXJdatas,
                            itemStyle: {
                                normal: {
                                    //每根柱子颜色设置
                                    color: function (params) {
                                        let colorList = [
                                            "#c23531",
                                            "#4BABDE",
                                            "#FFDE76",
                                            "#E43C59",
                                            "#2f4554",
                                            "#61a0a8",
                                            "#d48265",
                                            "#91c7ae",
                                            "#749f83",
                                            "#ca8622",
                                            "#bda29a",
                                            "#6e7074",
                                            "#546570",
                                            "#c4ccd3",

                                            "#37A2DA"
                                        ];
                                        return colorList[params.dataIndex];
                                    },
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: 'black',
                                            fontSize: 10
                                        }
                                    }
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(optionYWSR, true);//用药分类分析
                //抗肿瘤药物分析
                // var optionKZLYWFX = {
                //     title: {
                //         text: '抗肿瘤药物分析',
                //         subtext: '',
                //         x: 'center'
                //     },
                //     tooltip: {
                //         trigger: 'item',
                //         formatter: "{a} <br/>{b} : {c} ({d}%)"
                //     },
                //     legend: {
                //         orient: 'vertical',
                //         left: 'left',
                //         data: this.KZLYWKeys
                //     },
                //     series: [
                //         {
                //             name: '',
                //             type: 'pie',
                //             radius: '50%',
                //             center: ['50%', '50%'],
                //             data: this.KZLYWDatas,
                //             itemStyle: {
                //                 emphasis: {
                //                     shadowBlur: 10,
                //                     shadowOffsetX: 0,
                //                     normal: {
                //                         //颜色设置
                //                         color: function (params) {
                //                             let colorList = [
                //                                 "#4BABDE",
                //                                 "#FFDE76",
                //                                 "#E43C59",
                //                                 "#61a0a8",
                //                                 "#d48265",
                //                                 "#91c7ae",
                //                                 "#749f83",
                //                                 "#c23531",
                //                                 "#2f4554",
                //                                 "#ca8622",
                //                                 "#bda29a",
                //                                 "#6e7074",
                //                                 "#546570",
                //                                 "#c4ccd3",
                //
                //                                 "#37A2DA"
                //                             ];
                //                             return colorList[params.dataIndex];
                //                         }
                //                     }
                //                 }
                //             }
                //         }
                //     ]
                // };
                // myChart2.setOption(optionKZLYWFX, true);//抗肿瘤药物分析


            }//界面加载完成后执行
        },
        mounted() {
            this.init();
        },
        watch: {
            selectZZJGNames: {
                handler(newVal, objVal) {
                    console.log("触发改变%%%%%%%%%%%%%%%%%%%55")
                    this.showTooltip()
                    this.getDataList()
                },
            }
        },
        created() {
            this.msg = this.$route.query;
            console.log("接收过来的传参#############################################################################")
            console.log(this.msg)
            if (this.msg.Token != null && this.msg.Token != "") {
                console.log("设置Token")
                this.$setToken(this.msg.Token)
                this.$setItemUrl(this.msg.ItemIP)
                var loginInfor = this.msg.loginInfor;
                this.LoginInfor = JSON.parse(loginInfor);
                console.log("个人登录信息");
                console.log(this.LoginInfor);
                if (this.LoginInfor != null) {
                }
            } else {
                console.log("Token为空")
                var loginInfor = localStorage.getItem('LoginInfor');
                this.LoginInfor = JSON.parse(loginInfor);
                console.log("个人登录信息");
                console.log(this.LoginInfor);
                if (this.LoginInfor == null) {
                    this.LoginInfor = {
                        SectionName: "",
                        UserName: ""
                    }
                }
            }
            console.log("获取机构代码………………………………………………………………………………")
            this.ZZJGList = []
            this.ZZJGList.push(this.LoginInfor.HospitalTree)
            console.log(this.ZZJGList);
            if (this.ZZJGList.length > 0) {
                this.selectZZJGNames = this.LoginInfor.HospitalName + ","
                var obj = {
                    id: this.LoginInfor.HospitalId,
                    name: this.LoginInfor.HospitalName
                }
                this.selectZZJGIDList.push(obj)
                // this.$refs.treeJG.setCheckedKeys([obj.id]);
            }
            this.queryDataObj.BeginDate = this.formatDateTime(new Date(), -90); //挂号日期
            this.queryDataObj.EndDate = this.formatDateTime(new Date(), 0); //挂号日期

        }
    };
</script>
<style lang="scss">
    .NumbeRFMaintenMZZJJZ {
        .selectTime {
            .el-input__icon {
                height: 100%;
                width: 25px;
                display: none;
                text-align: center;
                -webkit-transition: all .3s;
                transition: all .3s;
                line-height: 40px;
            }

            .input {
                width: 90px !important;
                height: 28px !important;
            }


        }

        .ypList {
            .el-input__inner {
                height: 20px !important;
                padding: 0 0 0 15px !important;
            }

            .el-input__inner {
                -webkit-appearance: none;
                background-color: #FFF;
                background-image: none;
                border-radius: 4px;
                border: 1px solid #DCDFE6;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                color: #606266;
                display: inline-block;
                font-size: 10px !important;
                height: 40px;
                line-height: 40px;

                -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
                transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
                width: 100%;
            }

            .el-autocomplete-suggestion li {
                padding: 0px 6px !important;
                margin: 0;
                line-height: 34px;
                cursor: pointer;
                color: #606266;
                font-size: 10px !important;
                list-style: none;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .selectPic {
            ul {
                padding: 0;
                display: none;
            }
        }

        .camera_outer {
            position: relative;
            overflow: hidden;
            background: #0a1015;
            background-size: 100%;

            video, canvas, .tx_img {
                -moz-transform: scaleX(-1);
                -webkit-transform: scaleX(-1);
                -o-transform: scaleX(-1);
                transform: scaleX(-1);
            }

            .btn_camera {
                position: absolute;
                bottom: 4px;
                left: 0;
                right: 0;
                height: 50px;
                background-color: rgba(0, 0, 0, 0.3);
                line-height: 50px;
                text-align: center;
                color: #ffffff;
            }

            .bg_r_img {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                top: 0;
            }

            .img_bg_camera {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                top: 0;

                img {
                    width: 100%;
                    height: 100%;
                }

                .img_btn_camera {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    background-color: rgba(0, 0, 0, 0.3);
                    color: #ffffff;

                    .loding_img {
                        width: 50px;
                        height: 50px;
                    }
                }
            }
        }

        .Dilog {
            .column2 {
                width: 128rem;
                margin: 50px auto;
                background: #fff;
                border-radius: 5px;
                position: relative;
            }

            .form-control {
                width: 96px !important;
            }
        }

        .DilogYP {
            .column2 {
                width: 680px;
                margin: 50px auto;
                background: #fff;
                border-radius: 5px;
                position: relative;
            }

            .form-control {
                width: 96px !important;
            }
        }

        .div_P {
            .form-control {
                display: inline-block;
                width: 12rem;
                height: 32px;
                padding: 5px 12px;
                font-size: 14px;
                line-height: 1.42857143;
                color: #555;
                background-color: #fff;
                background-image: none;
                border: 1px solid #ccc;
                border-radius: 4px;
                -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
                -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            }

            .form-group {
                height: 45px;
                margin: 0;
                line-height: 32px;
                padding: 6px 15px 0 15px;
            }
        }

        .elRadioYygh {
            .column2 label {
                width: 52px !important;
            }

            .el-radio-button__inner {

                padding: 6px 11px;

            }
        }

        .fjtable {
            .el-table {
                font-size: 10px !important;
            }
        }

        .cardP {
            .text {
                font-size: 14px;
            }

            .el-card__header {
                padding: 18px 20px;
                border-bottom: 1px solid #EBEEF5;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                background-color: azure;
            }

            .item {
                margin-bottom: 18px;
            }

            .clearfix:before,
            .clearfix:after {
                display: table;
                content: "";
            }

            .clearfix:after {
                clear: both
            }

            .box-card {
                width: 100%;
            }
        }

        .cardPdd {
            .text {
                font-size: 14px;
            }

            .el-card__header {
                padding: 18px 20px;
                border-bottom: 1px solid #EBEEF5;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                background-color: azure;
            }

            .item {
                margin-bottom: 18px;
            }

            .clearfix:before,
            .clearfix:after {
                display: table;
                content: "";
            }

            .clearfix:after {
                clear: both
            }

            .box-card {
                width: 100%;
            }

            .el-card__body {
                padding: 2px;
            }
        }

        .cardPD {
            .text {
                font-size: 12px;
            }

            .el-card__header {
                padding: 8px 20px;
                border-bottom: 1px solid #EBEEF5;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                background-color: azure;
            }

            .item {
                margin-bottom: 18px;
            }

            .clearfix:before,
            .clearfix:after {
                display: table;
                content: "";
            }

            .clearfix:after {
                clear: both
            }

            .box-card {
                width: 100%;
            }
        }

        .cardC {
            .text {
                font-size: 14px;
            }

            .el-card__header {
                padding: 10px 20px;
                border-bottom: 1px solid #EBEEF5;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                background-color: white;
            }

            .el-card__body {
                padding: 8px;
            }

            .item {
                margin-bottom: 18px;
            }

            .clearfix:before,
            .clearfix:after {
                display: table;
                content: "";
            }

            .clearfix:after {
                clear: both
            }

            .box-card {
                width: 100%;
            }
        }


        .el-tree-node.is-current > .el-tree-node__content {
            color: #fff;
            background: #155a00 !important;
        }

        .dRightMain {
            padding: 18px;
        }

        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
        }

        .el-table {
            font-size: 14px !important;
        }

        .el-table thead {
            color: #303133;
        }

        .dRightMain .Tb {
            position: absolute;
            top: 91px;
            left: 240px;
            right: 15px;
            bottom: 0;
            border: 1px solid #ddd;
        }
    }

</style>
